<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="yes" name=" apple-mobile-web-app-capable"/>
    <meta content="no" name="apple-touch-fullscreen"/>
    <meta content="black" name=" apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <title>科室专家</title>
    <link href="css/reset.css" rel="stylesheet" type="text/css"/>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <link href="font/iconfont.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="css/swiper.min.css">
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
</head>
<body class="grayBg">
<!--头部菜单-->
<header class="headerBox pd-24">
    <!--侧边菜单-->
    <div class="menu">
        <i class="iconfont icon-tubiao-"></i>
    </div>
    <div class="aside-bar" id="menu">
        <ul>
            <li class="on">
                <a href="index.html"><i class="iconfont icon-shouye"></i>医院首页</a>
            </li>
            <li>
                <a href="医院文化.html"><i class="iconfont icon-wenhua"></i>医院文化</a>
            </li>
            <li>
                <a href="三务公开.html"><i class="iconfont icon-dangwugongkai"></i>三务公开</a>
            </li>
            <li>
                <a href="科研教学.html"><i class="iconfont icon-xueyuan"></i>科研教学</a>
            </li>
            <li>
                <a href="教育健康.html"><i class="iconfont icon-jiankangguanli"></i>健康教育</a>
            </li>
            <li>
                <a href="新闻动态.html"><i class="iconfont icon-xinwen"></i>新闻动态</a>
            </li>
            <li>
                <a href="科室专家.html"><i class="iconfont icon-zhuanjia"></i>科室专家</a>
            </li>
            <li>
                <a href="关于我们.html"><i class="iconfont icon-guanyu"></i>关于我们</a>
            </li>
            <li>
                <a href="人才招聘.html"><i class="iconfont icon-zhaopinrencai"></i>人才招聘</a>
            </li>
        </ul>
    </div>
    <div class="meng"></div>
</header>
<div class="expertBox">
    <div class="bannerBox whiteBg">
        <img src="img/banner7.png" alt=""/>
        <div>
            <h4>科室专家</h4>
            <p>Hospital Experts</p>
        </div>
    </div>

    <!-- Swiper -->
    <div class="expertSwiper">
        <div class="swiper-container whiteBg">
            <div class="swiper-wrapper">
                <div class="swiper-slide act">行政</div>
                <div class="swiper-slide">产科</div>
                <div class="swiper-slide">妇科</div>
                <div class="swiper-slide">儿科</div>
                <div class="swiper-slide">新生儿科</div>
                <div class="swiper-slide">门诊</div>
                <div class="swiper-slide">产科1</div>
                <div class="swiper-slide">妇科2</div>
                <div class="swiper-slide">儿科3</div>
                <div class="swiper-slide">新生儿科</div>
                <div class="swiper-slide">门诊5</div>
            </div>
        </div>
    </div>
    <!--科室专家列表-->
    <div class="expertDetailsList whiteBg pd-24">
        <ul class="teamDetail clearfix">
            <li>
                <img src="img/teamBg.jpg" alt=""/>
                <div class="detailsTxt clearfix">
                    <h4>张建宁</h4>
                    <span></span>
                    <p>妇产科&ensp;&ensp;主治医师</p>
                    <p class="line_clamp">
                        中共党员，1961年8月出生。教授，博士，博士生导师。现任天津医科大学总医院院长，神经外科主任，天津市神经病学研究所所长，加拿大蒙特利尔神经病学研究所高级顾问，并是神经外科学科带头人</p>
                </div>
            </li>
            <li>
                <img src="img/teamBg.jpg" alt=""/>
                <div class="detailsTxt clearfix">
                    <h4>张建宁</h4>
                    <span></span>
                    <p>妇产科&ensp;&ensp;主治医师</p>
                    <p class="line_clamp">
                        中共党员，1961年8月出生。教授，博士，博士生导师。现任天津医科大学总医院院长，神经外科主任，天津市神经病学研究所所长，加拿大蒙特利尔神经病学研究所高级顾问，并是神经外科学科带头人</p>
                </div>
            </li>
            <li>
                <img src="img/teamBg.jpg" alt=""/>
                <div class="detailsTxt clearfix">
                    <h4>张建宁</h4>
                    <span></span>
                    <p>妇产科&ensp;&ensp;主治医师</p>
                    <p class="line_clamp">
                        中共党员，1961年8月出生。教授，博士，博士生导师。现任天津医科大学总医院院长，神经外科主任，天津市神经病学研究所所长，加拿大蒙特利尔神经病学研究所高级顾问，并是神经外科学科带头人</p>
                </div>
            </li>
            <li>
                <img src="img/teamBg.jpg" alt=""/>
                <div class="detailsTxt clearfix">
                    <h4>张建宁</h4>
                    <span></span>
                    <p>妇产科&ensp;&ensp;主治医师</p>
                    <p class="line_clamp">
                        中共党员，1961年8月出生。教授，博士，博士生导师。现任天津医科大学总医院院长，神经外科主任，天津市神经病学研究所所长，加拿大蒙特利尔神经病学研究所高级顾问，并是神经外科学科带头人</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="expertDetailsList whiteBg pd-24">2</div>
    <div class="expertDetailsList whiteBg pd-24">3</div>
</div>
<script src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 6,
        spaceBetween: 20,
        slidesPerGroup: 6,
        loop: false,
        loopFillGroupWithBlank: true
    });
    $(function(){
        $(".expertDetailsList").eq(0).show();
        $(".expertSwiper").on("click",".swiper-slide",function(){
            $(this).addClass("act").siblings().removeClass("act");
            console.log($(this).index());
            $(".expertDetailsList").hide().eq($(this).index()).show();
        })
    })
</script>
</body>
</html>